<template>
  <div>
    <el-cascader
      v-model="value"
      :options="options"
      :props="props"
      filterable
      style="width: 100%"
      @change="handleChange"
      v-if="flag"
    ></el-cascader>
  </div>
</template>
<script>
export default {
  data() {
    return {
      flag: false,
      value: [],
      props: {
        children: 'childList',
        label: 'name',
        value: 'id',
        expandTrigger: 'hover',
        emitPath: false,
      },
    }
  },
  watch: {
    defaultValue(v) {
      this.value = v
    },
  },
  props: ['options', 'defaultValue'],
  mounted() {
    this.value = this.defaultValue
    this.options.forEach((v) => {
      v.childList.forEach((m) => {
        delete m.childList
      })
    })
    this.flag = true
  },
  methods: {
    handleChange(value) {
      this.$emit('emit', value)
    },
  },
}
</script>
<style scoped lang="scss">
</style>